import * as React from 'react'
import { Radio } from 'antd/es';
import TwsReactMarkdownPreview from '../../common/markdown/MarkdownPreview'
import RadioGroup from 'antd/es/radio/group';

export default class SingleChoicQuiz extends React.Component<any>{

    getCorrect(singleQuiz:any) {
        if (singleQuiz.isCorrect) {
            return '✅'
        } else if (singleQuiz.isCorrect === '') {
            return ''
        } else {
            return '❌'
        }
    }
    changeAnswer = (quizId: number, answer: number) => {
        this.props.modifyAnswer(quizId, answer.toString())
    }

    getValue(singleQuiz:any) {
        if (singleQuiz.userAnswer) {
            return parseInt(singleQuiz.userAnswer, 10)
        }
        return -1
    }
    render() {
        const { index, quiz } = this.props
        let { description } = quiz
        const status = quiz.answer
        const answer = `${this.getCorrect(quiz)}`
        return <div className='markdown-wrap'>
            <TwsReactMarkdownPreview source={`${index + 1}. ${description}`} />
            <div className='margin-t-2'>
                <RadioGroup
                    onChange={(e) => this.changeAnswer(quiz.id, e.target.value)}
                    defaultValue={this.getValue(quiz)}
                    disabled={!!status}>
                    {quiz.choices.map((option:any, index:number) =>
                        <Radio className='margin-l-2 radio-style'
                            key={index}
                            value={index}>
                            {option.choice}
                        </Radio>)}
                </RadioGroup>
                {status ? <TwsReactMarkdownPreview source={answer} /> : ''}
            </div>
        </div>
    }
}